<!--
 * @Author: your name
 * @Date: 2020-06-09 17:18:34
 * @LastEditTime: 2020-06-10 23:18:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \iem-web-projectd:\个人工具网站\www_admin_master\src\views\system\role.vue
-->
<template>
  <div>
    <u-table :table-data="tableData" :total="total" @handle-current-change="handleCurrentChange" @handle-size-change="handleSizeChange">
      <template slot="TableHead">
        <el-button size="medium" @click="addUsers">添加用户</el-button>
      </template>
      <template slot="TableBody">
        <el-table-column label="用户名称" prop="username" />
        <el-table-column label="密码" prop="password" />
        <el-table-column label="手机号" prop="phone" />
        <el-table-column label="头像" prop="thumb" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </template>
    </u-table>
    <!-- 打开弹窗 -->
    <el-dialog :title="uDialog.title" :visible.sync="uDialog.dialogFormVisible">
      <el-form :model="form" label-position="top">
        <div class="dialog-box">
          <div class="dialog-left">
            <el-form-item label="用户名称" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="账户密码" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="备注" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.remarks" autocomplete="off" />
            </el-form-item>
          </div>
          <div class="dialog-center">
            <el-form-item label="职位" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.authority" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所属角色" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.role" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" :label-width="uDialog.formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>
          </div>
          <div class="dialog-right">
            <el-form-item label="头像" :label-width="uDialog.formLabelWidth">
              <el-upload
                class="avatar-uploader"
                action="/api/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon" />
              </el-upload>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="uDialog.dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UTable from '@/components/UTable'
import { FIND_ROLE_ALL_INFO, ADD_USER_INFO } from '@/api/system'
export default {
  components: {
    UTable
  },
  data () {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      uDialog: {
        dialogFormVisible: false,
        title: '',
        formLabelWidth: '120px'
      },
      form: {},
      imageUrl: ''
    }
  },
  mounted () {
    // this.findAllRoleInfo()
    // this.$post('h/api/upload', { data: 'url' })
  },
  methods: {
    async findAllRoleInfo () {
      const res = await this.$post(FIND_ROLE_ALL_INFO, {
        'pageSize': '10',
        'currentPage': '1'
      })
      console.log('返回的数据', res)
      this.total = res.count
      this.tableData = res.rows
    },
    handleEdit (row) {
      this.uDialog.title = '编辑角色'
      this.uDialog.dialogFormVisible = true
      this.form = row
    },
    handleDelete (id) {
      console.log('删除')
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    // 创建角色按钮
    addUsers () {
      this.uDialog.title = '添加用户'
      this.form = {}
      this.uDialog.dialogFormVisible = true
    },
    // 添加角色
    handleAddForm () {
      console.log(this.form)
      this.addUserInfo(this.form)
      this.uDialog.dialogFormVisible = false
    },
    async addUserInfo(data) {
      let res = await this.$post(ADD_USER_INFO, data)
      console.log('添加成功', res)
      if (res.msg) {
        this.$message({
          message: res.msg,
          type: 'success'
        })
      }
    },
    // 添加头像
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      this.form.thumb = this.imageUrl
    },
    // 头像大小
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || 'image/svg'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style lang="scss">
.main-title {
 height: 40px;
}
.pagination-padding {
  padding: 20px 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dialog-box {
  width: 100%;
  display: flex;
  flex: 100;
  justify-content: space-between;
  .dialog-left {
    width: 32%;
  }
  .dialog-center {
    width: 32%;
  }
  .dialog-right {
    width: 32%;
  }
}
</style>
